import React,{useEffect,useRef,useState} from 'react'
import {Tabs} from 'antd'
import './index.css'

const { TabPane } = Tabs
export default function start() {
  const audoiRef = useRef(null)
  const [TabsOption,setTabsOptions] =  useState('3');
  const changeTabs = (e:string)=>{
    setTabsOptions(e)
  }
  // useEffect(() => {
  //   if(TabsOption !='3'){
  //     console.log(audoiRef)
  //     audoiRef?.current?.pause()
  //   }
  //   else {
  //     audoiRef?.current?.play()
  //   }
     
  // }, [TabsOption]);
  return (
    <>
    <a href='https://www.zhinian.co'>
    <h1>执念科技</h1>
    </a>
    <Tabs defaultActiveKey="3" onChange={changeTabs}>
    <TabPane tab="微信运动" key="1">
    <a href="./technology/exercise" target="_blank">微信运动</a>
    </TabPane>
    <TabPane tab="游戏引擎" key="2">
    <div className="box">
        <a href="./technology/game/virus" target="_blank">1、消灭新冠</a>
         <a href="./technology/game/Minecraft" target="_blank">2、我的世界</a>
    </div>
    </TabPane>
    {/* <TabPane tab="音乐系统" key="3">
    <h3 style={{textAlign:"center"}}>奶奶专属</h3>
    <br/>
    <div style={{textAlign:"center"}}>
    <audio  src='./assets/01.mp3'  ref={audoiRef} controls="controls" height="400px" width="400px" autoPlay loop >
    </audio>
    </div>
    <br/>
    </TabPane> */}
    <TabPane tab="人工智能" key="3">
    <a href="https://webgpt.zhinian.co/#/chat" target="_blank">聊天机器人</a>
    </TabPane>
  </Tabs>
  </>
  )
}
